{extend name="public/base"/}
{block name="style"}
<style>
    .input-order-sn
    {
        height: 30px;
        line-height: 30px;
        text-align: center;
    }
</style>
{/block}
{block name="content"}
<div>
    <div class="layui-col-md12" style="line-height: 80px;">
        <h1><span class="text-red">拣货单:</span>&nbsp;&nbsp;<span>{$pick.pick_sn}</span></h1>
    </div>
    <div class="pull-left">
        <div class="layui-inline">
            <h2>请扫描SKU:</h2>
        </div>
        <div class="layui-inline">
                <input type="text" class="layui-input input-order-sn" autocomplete="off" autofocus id="sku" placeholder="SKU">
        </div>
        <div class="layui-inline">
            <button class="layui-btn layui-btn-sm layui-btn-normal btn-search"><i class="layui-icon layui-icon-search"></i></button>
        </div>
    </div>
    <div class="pull-right">
        <button class="layui-btn layui-btn-sm layui-btn-danger" id="clear-tbody"><i class="layui-icon layui-icon-delete"></i>清空拣货单</button>
    </div>
    <div class="data">
        <input type="hidden" name="pick_id" id="pick_id" value="{$pick.pick_id}">
        <div class="layui-form-item">
            <div class="layui-col-sm12">
                <table class="layui-table text-center" lay-size="sm">
                    <thead>
                    <tr>
                        <th width="100">图片</th>
                        <th width="150">SKU</th>
                        <th width="150">数量</th>
                        <th>商品名称</th>
                        <th><div class="text-left">操作</div></th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
    layui.use(['layer', 'jquery', 'longli', 'printPDF'], function()
    {
        var layer = layui.layer
            , $ = layui.jquery
            , $tbody = $(".data table:first tbody")
            , pickId = $("#pick_id").val();

        $(".btn-search").click(function()
        {
            var $this = $("#sku")
                , scanSku = $this.val().trim();
            if(!scanSku) return false;
            if($this.data("match-success"))
            {
                $this.data("match-success", false);
                $tbody.empty();
            }
            var skus = []
                , qty = []
                , $exist = $tbody.find("." + scanSku);
            if($exist.length > 0)
            {
                var tempQty = $exist.attr("qty") * 1 + 1;
                $exist.attr("qty", tempQty);
                $exist.find(".pick-qty").text(tempQty);
            }
            else
            {
                skus.push(scanSku);
                qty.push(1);
            }
            $tbody.find("tr.sku").each(function()
            {
                var $tr = $(this);
                skus.push($tr.attr("sku"));
                qty.push($tr.attr("qty"));
            });
            $this.prop("disabled", true); // 锁定输入框
            layer.load(0, {shade: false});
            $.post("{:url('order')}", {skus, qty, "scan_sku": scanSku, "pick_id": pickId}).done(function(response)
            {
                layer.closeAll('loading');
                var data = response.data
                if(response.code == 1)
                {
                    $this.data("match-success", true);
                    if($exist.length < 1) $tbody.append(data.html);
                    if(data.type) layui.longli.playMP3(data.type);
                    // 执行打印
                    layui.printPDF.doPrint(DOMAIN_URL + data.order.label_url, data.size);
                    // 拣货完成跳转到拣货单列表
                    if(data.is_end)
                    {
                        layer.msg("面单打印完成", {icon: 6, time: 2000});
                        setTimeout(()=>{location.href="{:url('order/pick/index')}"}, 3000);
                    }
                }
                else
                {
                    // 处理未匹配
                    if($exist.length < 1 && data.html)
                    {
                        $tbody.append(data.html);
                    }
                    else if(response.msg)
                    {
                        if(data.type) layui.longli.playMP3(data.type);
                        // 提示错误
                        layer.msg(response.msg, {icon: 5, time: 3000});
                        // 清空表格
                        if(data.type == "match-fail") $tbody.empty();
                    }
                }
                // 释放并重新获取焦点
                $this.prop("disabled", false).val('').focus();
            }).error(function(data)
            {
                layer.closeAll('loading');
                layer.msg("扫描失败请重扫", {icon: 5});
                layui.longli.playMP3("scan-fail");
                $this.prop("disabled", false).val('').focus();
            });
        });
        // 扫描条码
        $("#sku").keydown(function(event)
        {
            if(event.keyCode != 13) return;
            $(".btn-search").click();
            return false;
        });
        // 清空表格
        $("#clear-tbody").click(function()
        {
            layer.confirm("确认要清空拣货单吗？", function(index, layero)
            {
                $tbody.empty();
                layer.close(index);
            });
        });
    });
</script>
{/block}